a:hover {
  text-decoration: underline;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background: skyblue;
}

form{            
  opacity: 0.8;
  text-align: center;
  padding: 0px 100px;
  border-radius: 10px;
  margin: 120px auto;
}

p {
-webkit-text-stroke: 1px #8e87c3;
}
.textinput{
  height: 40px;
  font-size: 15px;
  width: 100px;
  padding: 0 35px;
  border: none;
  background: rgba(250, 249, 249, 0.532);
  box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
  border-radius: 50px;
  -webkit-text-stroke: 0px;
  color: saddlebrown;
  outline-style: none;
}
input[type="submit"]{
  width: 110px;
  height: 40px;
  text-align: center;
  outline-style: none;
  border-style: none;
  border-radius: 50px;
  background: rgb(31, 209, 218);
  -webkit-text-stroke: 0px;
  box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}
input[type="submit"]:hover {
  background-color: rgb(31, 218, 78);
}
a {
  text-decoration: none;
  color: rgba(236, 20, 20, 0.433);
  -webkit-text-stroke: 1px;
}

.main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
  animation: move 6s linear infinite;
}
.main::after {
  position: absolute;
  content: "";
  width: 40px;
  height: 40px;
  background: rgba(254, 254, 254, 0.667);
  left: 80px;
  top: 80px;
  border-radius: 50%;
  animation: move2 6s linear infinite;
  filter:blur(1px);
}

.main::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  left: 130px;
  top: 70px;
  border-radius: 50%;
  animation: move3 6s linear infinite;
  filter:blur(1px);
}
@keyframes move {
  50% {
      border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
  }
  75% {
      border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%  ;
  }
  25% {
      border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%  ;
  }
}

@keyframes move2 {
  25% {
      left: 80px;
      top: 110px;
  }
  50% {
      left: 50px;
      top: 80px;
  }
  75% {
      left: 80px;
      top: 120px;
  }
}

@keyframes move3 {
  25% {
      left: 100px;
      top: 90px;
  }
  50% {
      left: 110px;
      top: 75px;
  }
  75% {
      left: 130px;
      top: 100px;
  }
}